<template>
  <div>
    <!-- <el-drawer
      v-model="showDrawer"
      title="立项详情"
      size="80%"
      direction="rtl"
      :close-on-click-modal="true"
    > -->
      <el-form :model="form" class="filter-box">
        <el-row :gutter="20">
          <el-col :span="5" v-if="type.searchType!=4">
            <el-form-item label="单位名称">
              <el-input @keyup.enter="query(type,pageSize4,currentPage4)" clearable v-model="form.companyName" placeholder="请输入单位名称">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="项目名称">
              <el-input
                v-model="form.itemName"
                @keyup.enter="query(type,pageSize4,currentPage4)"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="立项金额">
              <div class="flex items-center justify-between">
                <el-input
                  v-model="form.moneyStart"
                  placeholder="立项金额(万元)"
                  @input="(e:any) => validateInput(e,1)"
                  clearable
                />
                &nbsp;
                <span class="cut-line">-</span>
                &nbsp;
                <el-input
                  v-model="form.moneyEnd"
                  placeholder="立项金额(万元)"
                  @input="(e:any) => validateInput(e,2)"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="项目批次">
              <!-- <el-date-picker
                v-model="form.batchs"
                format="YYYY"
                value-format="YYYY"
                type="year"
                placeholder="选择批次"
              /> -->
              <el-select
                  class="w-full"
                  v-model="form.batchs"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="选择批次"
                  @change="query(type,pageSize4,currentPage4)"
                  clearable
                >
                  <el-option
                    v-for="item in batchs"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="type.searchType!=2">
            <el-form-item label="项目类型">
              <el-select
                v-model="form.itemTypes"
                multiple
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择项目类型"
                @change="query(type,pageSize4,currentPage4)"
                clearable
              >
                <el-option
                  v-for="item in projectTypes"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="4">
            <el-button type="primary" plain @click="query(type,pageSize4,currentPage4)">查询</el-button>
            <!--  -->
            <el-button type="info" :class="clear?'clear':'noClear'" @click="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="loading" element-loading-text="正在拼命加载中..." stripe :data="data" style="width: 100%" :height="data?.length>0?'100%':'100'" class="mb-5" :header-cell-style="{ background: '#2186F0', color: '#fff', textAlign: 'center' }">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column show-overflow-tooltip label="单位名称" align="center">
          <template #default="scoped">
            <el-link type="primary" @click="goDetailPage(scoped.row, '4')">
              <span v-html="hightLight(companyName,scoped.row.incorporation)"></span>
            </el-link>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="属地" /> -->
        <el-table-column label="项目名称" align="center"  show-overflow-tooltip>
          <template #default="scoped">
            <span v-html="hightLight(project,scoped.row.project)"></span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="立项金额" width="200" align="center" show-overflow-tooltip/>
        <el-table-column prop="year" label="项目批次" width="80" align="center" show-overflow-tooltip/>
        <el-table-column prop="status" label="项目状态"  width="90" align="center" show-overflow-tooltip/>
        <el-table-column prop="itemClass" label="项目类别" width="200" align="center"  show-overflow-tooltip/>
        <!-- <el-table-column label="信息来源" width="100">
          <template #default="scoped">
            <el-button
              type="primary"
              plain
              @click="goDetailPage(scoped.row.source, '1')"
            >
              来源
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    <el-pagination
      style="margin-top: 10px;"
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="projectDataTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- </el-drawer> -->
  </div>
</template>

<script setup lang="ts">
import { ref,computed,reactive,watch } from "vue";
import { useProjectDrawerHook } from "./hook";
import {usePolicyHook} from '../policy/hook'
import { useRoute,useRouter } from 'vue-router';
import { hightLight  } from '@/utils/index'
const contentList = computed(() => props.data.map((result) => hightLight(result)));

const router = useRouter()
const type = reactive(router.currentRoute.value.query)
const props = defineProps(["data",'projectDataTotal','queryProject']);
const emits = defineEmits(["queryProjectList"]);
const showDrawer = ref(false);

const { form, query, resetForm, projectTypes, validateInput,companyName,project,batchs } = useProjectDrawerHook(emits);
const goDetailPage = (row: object, searchType: any) => {
  window.open(
    `${location.origin}/detail?id=${row.id}&searchType=${searchType}&name=${row.incorporation}`,
    "_blank"
  );
};
const currentPage4 = ref(1)
const pageSize4 = ref(100)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize4.value = val
  currentPage4.value =1

  query(type,pageSize4.value,currentPage4.value)

  // props.queryProject(form,pageSize4.value,currentPage4.value)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage4.value = val
  query(type,pageSize4.value,currentPage4.value)

}
defineExpose({ showDrawer });
const clear = ref(true)
watch(form,()=>{
// console.log('0---',form)
  if(form.companyName!=''||form.batchs.length>0||form.moneyStart!=''||form.moneyEnd!=''||form.itemName!=''){
    clear.value = false
  }else{
    clear.value = true
  }
},{deep:true,immediate:true})
</script>

<style scoped>
.clear{
  background: #F4F4F5;
  color: #b1b3b8;
}
.noClear{
  background: #b1b3b8;
  color: #FFFF;
}
</style>
